<template>
  <div>
    <div class="news">
      <div
        class="news-item"
        v-for="(item, index) in newsListData"
        :key="index"
        @click="goDetails(item.newsId)"
      >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img v-if="item.newsImg[0]" :src="item.newsImg[0]" class="image" />
          <div style="padding: 14px;">
            <span>{{item.newsTitle}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.newsTime|timestampToTime}}</time>
              <div type="text" class="button userName">发布人:{{item.userName}}</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="pagesum">
      <el-pagination
        background
        :total="newsCount"
        @size-change="handleCurrentChange"
        @current-change="handleCurrentChange"
        :page-size="pageLine.limit"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { newsList_user } from "../../ajax/index";
export default {
  name: "",
  data() {
    return {
      pageLine: {
        page: 1,
        limit: 12,
        newsType: ""
      },
      newsListData: [],
      newsCount: 0
    };
  },
  created() {
    this.pageLine.newsType = this.$route.query.newsType;
    this.newsList();
  },
  methods: {
    newsList() {
      newsList_user(this.pageLine)
        .then(res => {
          if (res.code == 0) {
            this.$message({
              type: "info",
              message: res.msg
            });
            this.newsListData = [];
          } else {
            this.newsListData = res.data;
            this.newsCount = res.count;
          }
        })
        .catch(err => {
          this.loading = false;
          this.$message.error("新闻加载失败，请稍后再试！");
        });
    },
    handleCurrentChange(parm) {
      this.pageLine.page = parm;
      this.newsList();
    },
    goDetails(newsId) {
      this.$router.push({ path: "/home/info", query: { newsId: newsId } });
    },
    init() {
      this.pageLine.page = 1;
      this.newsListData=[]
      this.newsCount=0
      this.newsList();
    }
  },
  watch: {
    $route(to, from) {
      if (to.query.newsType != from.query.newsType) {
        this.pageLine.newsType = to.query.newsType;
        this.init();
      }
    }
  }
};
</script>

<style lang="scss">
.news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 41px;
  .news-item {
    margin: 20px 0px;
    box-sizing: border-box;
    .time {
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      line-height: 12px;
    }

    .button {
      padding: 0;
      float: right;
    }

    .image {
      width: 100%;
      height: 300px;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }
  }
}
.pagesum {
  text-align: center;
  margin: 40px auto;
}
.userName {
  font-size: 14px;
}
</style>